<template>
  <view class="container">
    <view class="top-section">
      <view class="top-f-row">
        <u-image height="48rpx" width="48rpx" src="/static/image/white_selected.png" bg-color="#539A8B"></u-image>
        <view v-if="orderData.returnList.length == 0" style="font-size: 38rpx;margin-left: 20rpx;">{{ checkStatusTip() }}</view>
		<view v-if="orderData.returnList.length > 0" style="font-size: 38rpx;margin-left: 20rpx;">
			{{ returnOrderStu() }}
		</view>
      </view>
      <!-- <view style="justify-content: center;">
        <u-button shape="circle" :custom-style="topButtonStyle">再次购买</u-button>
      </view> -->
    </view>
    <view class="delivery-section" v-if="orderData.deliverySn != null" >
		<picker @change="bindPickerChange" :range="columns">
		  <view style="margin-right: 20rpx;">
			<u-image width="48rpx" height="48rpx" src="/static/image/delivery_car.png"></u-image>
		  </view>
		  <view style="margin-right: 10rpx;">
			<view style="font-size: 28rpx;">快递单号：{{orderData.deliverySn}}</view>
			<!-- <view class="item-desc">2021-12-29 11:22:53</view> -->
		  </view>
		</picker>
    </view>

    <view class="addr-section">
      <view style="margin-right: 20rpx;">
        <u-image width="48rpx" height="48rpx" src="/static/image/address.png"></u-image>
      </view>
      <view style="margin-right: 10rpx;">
        <view style="font-size: 28rpx;">
          {{ orderData.receiverName }}
          <text style="margin-left: 20rpx;">{{ orderData.receiverPhone }}</text>
        </view>
        <view class="item-desc">
          {{ orderData.receiverProvince }}{{ orderData.receiverCity }}{{ orderData.receiverRegion }}{{ orderData.receiverDetailAddress }}
        </view>
      </view>
    </view>

    <view class="order-list">
      <view class="shop-group" v-for="item in orderData.detailList" :key="item.shopId">
        <view class="shop-title" @click="navTo('/pages/sys/home/store?id=' + item.shopId)">
          <view>
            <u-image width="48rpx" height="48rpx" src="/static/image/store.png"></u-image>
          </view>
          <view style="margin: 0 10rpx;">{{ item.shop.shopName }}</view>
          <view>
            <u-icon name="arrow-right" color="#999"></u-icon>
          </view>
        </view>
        <view class="order-item" v-for="orderItem in item.detailList" :key="orderItem.id"
          @click="navTo('/pages/sys/home/product?id=' + orderItem.skuId)">
          <view>
            <u-image width="150rpx" height="150rpx" :src="orderItem.skuPic"></u-image>
          </view>
          <view style="width: calc(100% - 160rpx);margin-left: 10rpx;">
            <view class="hide-long-text">{{ orderItem.skuName }}</view>
            <view style="color: #AAA;margin: 10rpx 0;overflow: hidden;text-overflow: ellipsis;">
              {{ orderItem.skuAttrsVals == '' ? '暂无规格描述' : getAttr(orderItem.skuAttrsVals) }}
            </view>
            <view style="display: flex;">
              <view style="flex: 1;color: #E71E22;font-weight: bold;"><text
                  style="font-size: 24rpx;">￥</text>{{ orderItem.skuPrice.toFixed(2) }}</view>
              <view style="flex: 1; text-align: right;color: #AAA;">× {{ orderItem.skuQuantity }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="order-info">
      <view><text class="label">订单编号：</text>{{ orderData.orderSn }}</view>
      <view><text class="label">下单时间：</text>{{ orderData.createTime }}</view>
      <view><text class="label">支付方式：</text>{{ checkPayType() }}</view>
      <view v-if="orderData.orderType != '1'"><text class="label">支付时间：</text>{{ orderData.paymentTime == null ? '' : orderData.paymentTime }}</view>
      <view><text class="label">配送方式：</text>{{ orderData.deliveryCompany }}</view>
	  <view><text class="label">发货时间：</text>{{ orderData.deliveryDate == null?'':orderData.deliveryDate }}</view>
	  <view v-if="orderData.returnList.length > 0"  style="color: red;"><text class="label">退货申请备注：</text>{{ orderData.returnList[0].description || "" }}</view>
	  <view v-if="orderData.returnList.length > 0"  style="color: red;"><text class="label">处理申请备注：</text>{{ orderData.returnList[0].handleNote || "" }}</view>
    </view>

    <view class="order-amount">
      <view class="amount-row">
        <view>商品总额</view>
        <view class="value"><text style="margin-right: 4rpx;">￥</text>{{ orderData.totalAmount.toFixed(2) }}</view>
      </view>
      <view class="amount-row">
        <view>运费</view>
        <view class="value"><text style="margin-right: 4rpx;">＋￥</text>{{ orderData.freightAmount.toFixed(2) }}</view>
      </view>
      <view class="amount-row">
        <view>支付优惠</view>
        <view class="value">
          <text style="margin-right: 4rpx;">－￥</text>
          {{ (orderData.couponAmount + orderData.integrationAmount + orderData.discountAmount).toFixed(2) }}
        </view>
      </view>
      <view class="bottom-row">
        实付金额：
        <text style="color: #E71E22;">￥{{ orderData.payAmount.toFixed(2) }}</text>
      </view>
    </view>
	
  </view>
</template>

<script>
	
	
  export default {
    data() {
      return {
		  // 选择器
		  show: false,
		  // 快递单号数组
		  columns: [],
		// 拼团配送日期
		deliveryDate: null,
        orderData: {
          couponAmount: 0.00,
          integrationAmount: 0.00,
          discountAmount: 0.00,
          payAmount: 0.00,
          totalAmount: 0.00,
          freightAmount: 0.00,
          receiverProvince: '',
          receiverCity: '',
          receiverRegion: '',
          receiverRegion: '',
          receiverDetailAddress: '',
          orderSn: '',
          createTime: '',
          paymentTime: '',
          deliveryCompany: '',
          deliveryTime: '',
          detailList: [{
            shop: {},
            shopId: '',
            detailList: []
          }]
        },
        topButtonStyle: {
          width: '260rpx',
          color: '#539A8B',
          marginTop: '20rpx'
        }
      }
    },
    onLoad(e) {
      this.getOrderInfo(e.id);
    },
    methods: {
		// 选择快递单号进入查看物流
		bindPickerChange(e){
			uni.navigateTo({
				url: "plugin://kdPlugin/index?num=" + this.columns[e.detail.value] + "&appName=艾迪欧数字营销"
			})
		},
      // 获取订单信息
      getOrderInfo(id) {
        this.$api.request.getOrderDetailInfo({
          orderId: id
        }, res => {
			this.orderData = res.data
			this.columns = res.data.deliverySn.split(" ")
			// 如果是团购订单
			if(res.data.orderType == '3'){
				// 获取配送日期
				this.$api.request.getGroupDeliveryDate({
					skuId: res.data.detailList[0].detailList[0].skuId
				}, rs => {
					if(rs.code == 200){
						this.deliveryDate = rs.data						
					}
				})
			}
		});
      },
      // 解析商品规格
      getAttr(attrVals) {
        let attrVal = JSON.parse(attrVals);
        return attrVal.key + " - " + attrVal.value;
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
	  // 退款状态
	  returnOrderStu() {
		  let statusTip = "";
		  switch (this.orderData.returnList[0].status) {
		    case 0:
		      statusTip = "申请退款中";
		      break;
		    case 1:
		      statusTip = "退货中";
		      break;
		    case 2:
		      statusTip = "已退款";
			  break;
		    case 3:
		      statusTip = "退款未通过";
		  }
		  return statusTip;
	  },
      // 返回订单状态
      checkStatusTip() {
        let statusTip = "待付款";
        switch (this.orderData.status) {
          case 1:
            statusTip = "待发货";
            break;
          case 2:
            statusTip = "已发货";
            break;
          case 3:
            statusTip = "已完成";
			break;
          case 4:
            statusTip = "已关闭";
			break;
		  case 5:
			statusTip = "已失效";
			break;
        }
        return statusTip;
      },
      // 返回支付方式
      checkPayType() {
        if (this.orderData.payType == null) {
			if(this.orderData.orderType == '1'){
				return '会员选菜'
			}
          return '未支付';
        }
        let type = "其他";
        switch (this.orderData.payType) {
          case 1:
            type = "支付宝";
            break;
          case 2:
            type = "微信"
            break;
          case 3:
            type = "银联"
            break;
          case 4:
            type = "货到付款"
            break;
        }
        return type;
      }
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;

    .top-section {
      height: 160rpx;
      color: #EAEAE3;
      background-color: #539A8B;

      .top-f-row {
        display: flex;
        background: none;
        line-height: 48rpx;
        padding-top: 50rpx;
        text-align: center;
        justify-content: center;
      }
    }

    .delivery-section,
    .addr-section {
      display: flex;	  
      padding: 20rpx;
      align-items: center;
      background-color: #FFFFFF;

      .item-desc {
        color: #999;
        font-size: 24rpx;
        padding-top: 10rpx;
      }
    }

    .addr-section {
      margin-top: 4rpx;
      min-height: 150rpx;
    }

    .order-list {
      width: 100%;
      margin-top: 15rpx;

      .shop-group {
        margin-bottom: 6rpx;
        padding: 0 20rpx;
        background-color: #FFFFFF;

        .shop-title {
          display: flex;
          line-height: 48rpx;
          padding: 10rpx 20rpx;
          border-bottom: 2rpx #EEEEEE solid;
        }

        .order-item {
          display: flex;
          padding: 10rpx 0;
          border-bottom: 2rpx #EEEEEE solid;
        }
      }
    }

    .order-info {
      padding: 20rpx;
      line-height: 40rpx;
      margin-top: 20rpx;
      background-color: #FFFFFF;

      .label {
        color: #AAA;
      }
    }

    .order-amount {
      padding: 20rpx;
      margin-top: 4rpx;
      background-color: #FFFFFF;

      .amount-row {
        display: flex;
        line-height: 48rpx;

        .value {
          flex: 1;
          color: #E71E22;
          font-weight: bold;
          text-align: right;
        }
      }

      .bottom-row {
        text-align: right;
        font-weight: bold;
        margin-bottom: 20rpx;
        line-height: 48rpx;
      }
    }

    .hide-long-text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
</style>
